<template>
  <el-container class="layout-container">
    <el-aside :width="isSidebarCollapsed ? '64px' : '200px'" class="sidebar">
      <div class="logo-container">
        <img src="@/assets/images/logo.png" alt="logo" class="logo-img" v-if="!isSidebarCollapsed">
        <span v-else class="logo-text">MES</span>
      </div>

      <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical"
          :collapse="isSidebarCollapsed"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
          router
      >
        <template v-for="route in routes" :key="route.path">
          <template v-if="route.children">
            <!-- 情况一: 只有一个子路由，直接显示为一级菜单 -->
            <el-menu-item v-if="route.children.length === 1" :index="route.children[0].path">
              <el-icon><component :is="route.children[0].meta.icon" /></el-icon>
              <template #title>
                <span>{{ route.children[0].meta.title }}</span>
              </template>
            </el-menu-item>

            <!-- 情况二: 有多个子路由，显示为带下拉的子菜单 -->
            <el-sub-menu v-else :index="route.path">
              <template #title>
                <el-icon v-if="route.meta && route.meta.icon"><component :is="route.meta.icon" /></el-icon>
                <span>{{ route.meta.title }}</span>
              </template>
              <el-menu-item
                  v-for="child in route.children"
                  :key="child.path"
                  :index="child.path"
              >
                {{ child.meta.title }}
              </el-menu-item>
            </el-sub-menu>
          </template>
        </template>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="header">
        <div class="header-left">
          <el-icon @click="appStore.toggleSidebar" class="collapse-icon"><Fold /></el-icon>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="item in breadcrumbs" :key="item.path">{{ item.meta.title }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="header-right"></div>
      </el-header>
      <el-main class="main-content">
        <router-view v-slot="{ Component, route }">
          <transition name="fade-transform" mode="out-in">
            <div :key="route.path">
              <component :is="Component" />
            </div>
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useAppStore } from '@/store/modules/app'
import { routes } from '@/router/routes'

const route = useRoute()
const appStore = useAppStore()

const isSidebarCollapsed = computed(() => appStore.isSidebarCollapsed)
const activeMenu = computed(() => route.path)
const breadcrumbs = computed(() => route.matched.filter(item => item.meta && item.meta.title))
</script>

<style scoped>
.layout-container {
  height: 100vh;
}

.sidebar {
  background-color: #304156;
  transition: width 0.28s;
  overflow-x: hidden;
}

.sidebar .logo-container {
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  background-color: #2b2f3a;
}

.sidebar .logo-container .logo-img {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 12px;
}

.sidebar .logo-container .logo-text {
  font-size: 14px;
}

.sidebar .el-menu {
  border-right: none;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
}

.header .header-left {
  display: flex;
  align-items: center;
}

.header .header-left .collapse-icon {
  cursor: pointer;
  font-size: 20px;
  margin-right: 15px;
}

.main-content {
  padding: 20px;
  background-color: #f0f2f5;
  overflow-y: auto;
}
</style>
